<template>
	<!-- <u-popup :show="siveShow" mode="center" zIndex='99' overlayOpacity='0' duration="100">
		<Head :key="headkey"></Head>
		<view class="main-main">
			<view class="main-top" v-for="(el,ind) in list[0].query" :key="el.id">
				<view class="top-top">
					<view class="txet">
						{{el.title}}
						<view class="xian"></view>
					</view>
					<view class="top-bottom">
						<view :class="['top-bottom-top',el.img.length>4?'tiejkaej':'']" v-for="(v,i) in el.img" :key="i"
							@tap="jamp(v)">
							<image v-if="v.icon" :src="v.icon" alt="" style="width: 62px; height: 62px;"></image>
							<view v-else class=""></view>
							<view class="title" v-if="v.title && v.title.length>5" style="font-size: 12px;">
								{{v.title}}
							</view>
							<view class="title" v-else> {{v.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<suspension-ball :isShow="true" @tap.native="jampBall"></suspension-ball>
	</u-popup> -->
	
	<uni-popup ref="popup" type="dialog" :mask-click="false">
		<Head :key="headkey"></Head>
		<view class="main-main">
			<view class="main-top" v-for="(el,ind) in list[0].query" :key="el.id">
				<view class="top-top">
					<view class="txet">
						{{el.title}}
						<view class="xian"></view>
					</view>
					<view class="top-bottom">
						<view :class="['top-bottom-top',el.img.length>4?'tiejkaej':'']" v-for="(v,i) in el.img" :key="i"
							@tap="jamp(v)">
							<image v-if="v.icon" :src="v.icon" alt="" style="width: 62px; height: 62px;"></image>
							<view v-else class=""></view>
							<view class="title" v-if="v.title && v.title.length>5" style="font-size: 12px;">
								{{v.title}}
							</view>
							<view class="title" v-else> {{v.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<suspension-ball :isShow="true" @tap.native="jampBall"></suspension-ball>
		</uni-popup>
</template>

<script>
	import Head from './head.vue'
	import suspensionBall from './xuanfuqiu.vue'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		components: {
			Head,
			suspensionBall
		},
		computed: {
			...mapState('user', ['siveShow', 'vitalShow'])
		},
		data() {
			return {
				headkey: 0,
				list: [{
					query: [{
							title: '设置',
							id: 1,
							img: [{
									icon: '../../static/patient/icon-patientInformation.png',
									title: '病人信息',
									url: '../information/index'
								},
								{
									icon: '../../static/patient/icon-reportQuery.png',
									title: '报告查询',
									url: '../ListOfPatients/baogaochaxun'
								},
								{
									icon: '../../static/patient/icon-expenseQuery.png',
									title: '费用查询',
									url: '../ListOfPatients/feiyongchaxun'
								},
								// {
								// 	icon: '../../static/patient/icon-surgicalInquiry.png',
								// 	title: '手术查询'
								// },
								{
									// icon: '../../static/patient/icon-lifequery.png',
									// title: '生命体征查询',
									// url:'../information/vitalSigns'
								}
							]
						},
						{
							title: '医嘱',
							id: 2,
							img: [{
									icon: '../../static/patient/icon-orderQuery.png',
									title: '医嘱查询',
									url: '../ListOfPatients/yizhuchaxun'
								},
								{
									icon: '../../static/patient/icon-taskList.png',
									title: '任务清单',
									url: '../ListOfPatients/index'
								},
								{
									// icon: '../../static/patient/icon-orderExecution.png',
									// title: '医嘱执行'
								},
								{
									// icon: '../../static/patient/icon-infusionManagement.png',
									// title: '输液管理'
								},

							]
						},
						{
							title: '护理',
							id: 3,
							img: [{
									icon: '../../static/patient/icon-vitalSigns.png',
									title: '生命体征',
									url: '../hospitallist/index'
								},
								{
									icon: '../../static/patient/icon-lifequery.png',
									title: '生命体征查询',
									url: '../information/vitalSigns'
								},
								{
									icon: '../../static/patient/icon-nursingDocuments.png',
									title: '护理文书',
									url: '../information/documents'
								},
								{
									icon: '../../static/patient/icon-thermometer.png',
									title: '体温单',
									url: '../information/Thermometer'
								}, {}
							]
						},
						{
							title: '其它',
							id: 4,
							img: [{
									icon: '../../static/patient/icon-braceletSettings.png',
									title: '手环设置',
									url: '../DropDown/bracelet'
								},
								{
									icon: '../../static/patient/icon-NursingInformation.png',
									title: '护理信息',
									url: '../information/Nursing'
								}, {
									icon: '../../static/patient/icon-BreastMilkCheck.png',
									title: '母乳核对',
									url: '../information/Breastmilk'
								},
								{
									// icon: '../../static/patient/icon-ExecuteSpecial.png',
									// title: '执行特殊'

								}
							]
						}

					],
				}]
			}
		},
		onShow() {
			this.headkey++;
		},
		watch:{
			siveShow(val){
				console.log(val);
				if(val){
					this.$refs.popup.open('center')
				}else{
					this.$refs.popup.close()
				}
			}
		},
		methods: {
			...mapMutations("user", ["set_siveShow", "set_vitalShow"]),
			jamp(data) {
				if (data.title === '生命体征') {
					this.set_siveShow(false)
					this.set_vitalShow(true)
				} else {
					uni.navigateTo({
						url: data.url
					});
				}

			},
			moveHandle() {},
			jampBall() {
				this.set_siveShow(false)
			}
		}
	}
</script>
<style scoped lang="scss">
	::v-deep .u-fade-enter-active {
		pointer-events: none !important;
	}

	::v-deep .u-fade-leave-active {
		pointer-events: none
	}

	::v-deep .u-popup__content {
		width: 100%;
		height: 100vh;
	}

	.main {
		width: 100%;
		height: 100%;
		background: #F6F6F6;
		overflow: hidden;
	}

	.main-main {
		width: 100%;
		height: calc(100% - 110px);
		overflow-y: scroll;
		// height: 100%;
	}

	.main-top {
		// width: 365px;
		width: 97%;
		// height: 135px;
		background: #FFFFFF;
		border-radius: 4px;
		margin: 0 auto 5px;
		position: relative;

		&:nth-child(1) {
			margin-top: 5px;
		}

		.top-top {
			padding: 20rpx;

			// position: relative;
			.txet {
				height: 38px;
				font-size: 36rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #000000;
				line-height: 48rpx
			}
		}

		.xian {
			position: absolute;
			width: 100%;
			height: 2rpx;
			background: #7AD9DF;
			left: 0;
			top: 40px;
			opacity: 0.19;
			// opacity: 0.19;
			// margin: 14rpx 0;
		}

		.top-bottom {
			display: flex;
			flex-wrap: wrap;

			.top-bottom-top {
				// margin: 0 12rpx;
				// position: relative;
				width: 25%;
				text-align: center;
				// &:first-child{
				// 	margin-left: 0;
				// }

				// &:last-child {
				// 	margin-right: 0;

				// }
				.title {
					text-align: center;
					margin: -52rpx auto 0;
					font-size: 13px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #404040;
					line-height: 21px;
					white-space: nowrap;
					position: relative;
				}
			}

		}

	}

	.tiejkaej {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}
	
	
	::v-deep.uni-popup{
		.uni-popup__wrapper{
			width: 100%;
			height: 100%;
			background-color: #F7F7F7 !important;
		}
	}
</style>
